<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt Example, handle wire events</title>
  
<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../lib/yui/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="../lib/yui/reset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="../lib/yui/container/assets/container.css"> 

<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>

<!-- Excanvas -->
<!--[if IE]><script type="text/javascript" src="../lib/excanvas.js"></script><![endif]-->

<!-- WireIt -->
<script type="text/javascript" src="../js/WireIt.js"></script>
<script type="text/javascript" src="../js/CanvasElement.js"></script>
<script type="text/javascript" src="../js/Wire.js"></script>
<script type="text/javascript" src="../js/Terminal.js"></script>
<script type="text/javascript" src="../js/util/Anim.js"></script>
<script type="text/javascript" src="../js/util/DD.js"></script>
<script type="text/javascript" src="../js/util/DDResize.js"></script>
<script type="text/javascript" src="../js/Container.js"></script>
<script type="text/javascript" src="../js/Layer.js"></script>

<link rel="stylesheet" type="text/css" href="../css/WireIt.css" />


<script>

window.onload = function() {
	
	// Functions executed with the scope of a wire
	var wireRed = function() {
			this.options.color = 'rgb(255, 0, 0)';
	  		this.redraw();
		},
		wireBlue = function() {
			this.options.color = 'rgb(173, 216, 230)';
			this.redraw();
		},
		wireClick = function() {
			alert("Hoho ! you clicked !");
		};
	
	// Generate a random layer
	var layer = new WireIt.Layer({});
	for(var i = 0 ; i < 5 ; i++) {
		layer.addContainer({
			terminals: [ {direction: [0,1], offsetPosition: {bottom: -13, left: 25} }],
			title: "Block #"+i,
			position: [ Math.floor(Math.random()*800)+30, Math.floor(Math.random()*300)+30 ]
		});
	}
	
	for(var i = 0 ; i < 7 ; i++) {
	
		var w = layer.addWire({
			src: {moduleId: Math.floor(Math.random()*5), terminalId: 0},
			tgt: {moduleId: Math.floor(Math.random()*5), terminalId: 0}
		});
	
		// Subscribe methods to mouse events for all wires
		w.eventMouseIn.subscribe(wireRed, w, true);
		w.eventMouseOut.subscribe(wireBlue, w, true);
		w.eventMouseClick.subscribe(wireClick, w, true);
	}
};


</script>
</head><body></body></html>